<template>
  <transition name="fade">
    <div :class="classes" :style="outerStyles" v-show="show">
      <div :class="innerClasses" :style="styles"></div>
    </div>
  </transition>
</template>
<script>
//    import { oneOf } from '../../utils/assist';

const prefixCls = 'ivu-loading-bar';

export default {
  name: 'LoadingBar',
  props: {
    //            percent: {
    //                type: Number,
    //                default: 0
    //            },
    color: {
      type: String,
      default: 'primary'
    },
    failedColor: {
      type: String,
      default: 'error'
    },
    height: {
      type: Number,
      default: 2
    }
    //            status: {
    //                type: String,
    //                validator (value) {
    //                    return oneOf(value, ['success', 'error']);
    //                },
    //                default: 'success'
    //            },
    //            show: {
    //                type: Boolean,
    //                default: false
    //            }
  },
  data() {
    return {
      percent: 0,
      //                color: 'primary',
      //                failedColor: 'error',
      //                height: 2,
      status: 'success',
      show: false
    };
  },
  computed: {
    classes() {
      return `${prefixCls}`;
    },
    innerClasses() {
      return [
        `${prefixCls}-inner`,
        {
          [`${prefixCls}-inner-color-primary`]: this.color === 'primary' && this.status === 'success',
          [`${prefixCls}-inner-failed-color-error`]: this.failedColor === 'error' && this.status === 'error'
        }
      ];
    },
    outerStyles() {
      return {
        height: `${this.height}px`
      };
    },
    styles() {
      let style = {
        width: `${this.percent}%`,
        height: `${this.height}px`
      };

      if (this.color !== 'primary' && this.status === 'success') {
        style.backgroundColor = this.color;
      }

      if (this.failedColor !== 'error' && this.status === 'error') {
        style.backgroundColor = this.failedColor;
      }

      return style;
    }
  }
};
</script>
